<!--
    @name 预约查询
    @author 陈靖文
    @time 2021-1-21
 -->
<template>
  <section class="appointment-select">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :dynamic-api-style="'restful'"
      :callback-obj="callbackObj"
    />

    <Edit
      :key="editPopupsKey"
      :popups-visible.sync="editVisible"
      :data-for-form="editRowData"
      :popups-state="editPopupsState"
      :check-new-code="checkCode"
    />
  </section>
</template>

<script>
import Edit from '@/components/se/appointmentSelect/appointmentTegistrations' // 权益详情
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { managements } from '@/api/se/bookingManagement'
import { exportExcel } from '@/utils/getTimeString.js'
export default {
  name: 'Appointmentquiry',

  // // 阻塞路由预加载网格中组件的数据
  // beforeRouteEnter(to, from, next) {
  //   Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ""], function () {
  //     next();
  //   });
  // },
  components: {
    OneTableTemplate,
    Edit
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      // 预约查询定义一个 状态码
      checkCode: true,

      editRowData: {},
      editPopupsState: '',
      editVisible: false,
      // 网格查询API配置对象
      apiConfig: managements.queryAppointmentPages,

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'key0',
              labelName: '预约日期：',
              codeField: 'appointDate',
              component: () =>
                import('@/components/org/datePicker/andtDatePicker'),
              type: 'date',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'key1',
              labelName: '车牌号：',
              codeField: 'carLicense',
              isMul: false,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'key2',
              labelName: 'VIN码：',
              codeField: 'vin',

              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'key3',
              labelName: '预约状态：',
              codeField: 'reserveState',

              lookuptype: 'SE0024',
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              customObj: {
                api: managements.reservationStatus
              },
              isMul: false,
              isMust: true
            },
            {
              compKey: 'key4',
              labelName: '客户姓名：',
              codeField: 'custName',

              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'key5',
              labelName: '预约人：',
              codeField: 'reserveMan',

              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'key6',
              labelName: '联系电话：',
              codeField: 'reserveTel',

              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'key7',
              labelName: '预约来源：',
              codeField: 'reserveSourceCode',
              lookuptype: 'SE0171',
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              customObj: {
                api: managements.reservationStatus1
              },
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey6',
              labelName: '门店编码：',
              codeField: 'dlrCode',
              textField: 'dlrCode',
              component: () => import('@/components/ve/salesStore'),
              type: 'dropdownList',
              isMust: false
            }
          ],
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(),
          text: this.$t('sys.button.query'), // 查询
          name: 'search', // 按钮图标样式
          position: 'right'
        },
        {
          compKey: 'btnKey3',
          type: '',
          size: 'small',
          clickEvent: () => this.export(),
          text: this.$t('sys.button.export'),
          name: 'export',
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          name: 'reset',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        }
      ],

      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'controlBtn',
              label: '操作', // 操作
              codeField: 'orgName',
              width: null,
              align: 'center',
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey0',
                  align: 'center',
                  labelName: '查看',

                  clickEvent: (index) => {
                    this.esited(index)
                  },
                  component: () => import('@/components/org/linkButton')
                }
              ]
            },
            {
              label: '门店编码',
              prop: 'dlrCode'
            },
            {
              label: '门店名称',
              prop: 'dlrShortName'
            },
            {
              label: '预约单号',
              prop: 'reserveOrderCode'
            },
            {
              label: '车牌号',
              prop: 'carLicense'
            },
            {
              label: 'VIN码',
              prop: 'vin'
            },
            {
              label: '预约人',
              prop: 'reserveMan'
            },
            {
              label: '预约电话',
              prop: 'reserveTel'
            },
            {
              label: '预约时间',
              prop: 'appointDate'
            },
            {
              label: '预约状态',
              prop: 'reserveStateName'
            },
            {
              label: '服务顾问',
              prop: 'saName'
            },
            {
              label: '预约来源',
              prop: 'reserveSource'
            },
            {
              label: '预约创建时间',
              prop: 'createdDate'
            }
          ],
      // 表单查询数据
      formField: this.$utils.getFormField(
        this,
        {
          appointDate: '',
          carLicense: '' /* 车牌号 */,
          vin: '' /* VIN码 */,
          reserveState: '' /* 预约状态 */,
          custName: '' /* 客户姓名 */,
          reserveMan: '' /* 预约人 */,
          reserveTel: '' /* 联系电话*/,
          reserveSourceCode: '' /* 预约来源*/,
          dlrCode: '' /* 门店编码： */
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },
  watch: {
    'formField.orderStatus': {
      deep: true,
      handler: function(newV, oldV) {
        this.queryTable()
      }
    }
  },
  mounted() {
    this.queryTable()
  },

  methods: {
    /** 打开预约登记详情 */
    esited(index) {
      this.editVisible = true

      this.editRowData = this.$utils.deepCopy(
        this.$refs['multipleTable'].list[index]
      )
    },

    export() {
      exportExcel(this.formField, managements.exports.APIUrl, managements.exports.ServiceCode, '预约查询')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
